<template>
  <div class="complaint-papers">
    <el-table
      :data="tableData"
      style="width: 100%; overflow-y: auto;"
      height="80vh"
    >
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="news" label="标题Id">
        <template slot-scope="scope">
          {{ scope.row.news.id }}
        </template>
      </el-table-column>
      <el-table-column prop="user" label="用户" width="200">
        <template slot-scope="scope">
          {{ scope.row.user.name }}
        </template>
      </el-table-column>
      <el-table-column prop="content" label="投诉原因" width="400" />
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="showNews(scope.row, scope.$index)"
          >
            审阅
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="len"
      :limit.sync="limit"
      :page="page"
      @pagination="getList"
    />
    <el-dialog
      :visible.sync="visibleNews"
      width="30%"
      :fullscreen="true"
      center
    >
      <News :content="dialogContent" />
      <el-form
        ref="form"
        :model="complaintForm"
        label-width="100px"
        style="height: 40px; margin-top: 10px;"
      >
        <el-form-item label="反馈用户">
          <el-input v-model="complaintForm.content" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <span slot="title">{{ dialogTitle }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibleNews = false">取 消</el-button>
        <el-button type="primary" @click="submitComplaint">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import News from '@/components/news'
import { getNewsComplaint, getNews, postNewsComplaint } from '@/api/news'
export default {
  name: 'ComplaintPapers',
  directives: { waves },
  components: { Pagination, News },
  data() {
    return {
      dialogTitle: '1',
      dialogContent: '',
      dialogIndex: -1,
      visibleNews: false,
      complaintForm: {
        id: '',
        user: '',
        admin: '',
        content: ''
      },
      page: 1,
      limit: 10,
      len: 100,
      tableData: []
    }
  },
  created() {
    this.getList({ page: this.page, limit: this.limit })
  },
  methods: {
    async getList({ page = this.page, limit = this.limit }) {
      const result = await getNewsComplaint({
        page,
        limit
      })
      if (result.code === 1) {
        this.tableData = result.data
        this.len = result.len
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    async showNews(row, index) {
      const result = await getNews({ id: row.id })
      if (result.code === 1) {
        this.visibleNews = true
        this.complaintForm.id = row.id
        this.complaintForm.user = row.user.id
        this.complaintForm.admin = this.$store.state.user.id
        this.dialogTitle = result.data.title
        this.dialogContent = result.data.content
        this.dialogIndex = index
      }
    },
    async submitComplaint() {
      const result = await postNewsComplaint(this.complaintForm)
      this.visibleNews = false
      if (result.code === 0) {
        this.$message({
          message: '反馈用户成功',
          type: 'success'
        })
        this.tableData.splice(this.dialogIndex, 1)
        this.dialogIndex = -1
      } else {
        this.$message({
          message: result.msg,
          type: 'error'
        })
      }
      this.complaintForm = {
        id: '',
        user: '',
        admin: '',
        content: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.complaint-papers {
  padding: 20px;
}
/deep/ .el-table__body-wrapper {
  @include scrollBar();
}
</style>
